/**
 * 传递参数
 */

import React from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';

import LogoTitle from '../public/LogoTitle';

class CustomNavScreen extends React.Component {

  static navigationOptions = ({navigation}) => {
    return {
      title: navigation.getParam('title'),
      headerTitle: navigation.getParam('headerTitle'),
      headerStyle: {
        backgroundColor: 'yellow',
      },
      headerTintColor: 'blue',
    }
  };

  render() {
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');  // 如果取不到，则默认为 NO-ID
    const name = navigation.getParam('name', '无名');
    const age = navigation.getParam('age');
    return (
      <View style={styles.container}>
        <Text>前面传递的参数</Text>
        <Text>{ JSON.stringify(navigation.state.params) }</Text>
        <Text>itemId: { itemId }, name: {name}, age: {age}</Text>

        <TouchableOpacity style={styles.button} onPress={() => navigation.setParams({title: '新标题', headerTitle: null})}>
          <Text style={{color: 'orange'}}>更新标题</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.button} onPress={() => navigation.setParams({headerTitle: <LogoTitle />})}>
          <Text style={{color: 'orange'}}>更新Logo标题</Text>
        </TouchableOpacity>

        <View style={{margin: 10}}>
          <Text>1、看我的nav。我覆盖共享的navigationOptions</Text>
          <Text>2、我可以更新标题</Text>
          <Text>3、使用自定义组件替换标题</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },
  button: {
    marginTop: 30,
    padding: 5,
    borderWidth: 1,
    borderRadius: 5,
    borderColor: 'orange',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

export default CustomNavScreen;